<template>
	<div id="articles">
		<el-container>
			<el-header height="auto">
				<sectionTitle>栏目介绍</sectionTitle>
				<wImage :image="categoryInfo.image"></wImage>
				<div class="categoryInfo">
					<h3>{{categoryInfo.name}}</h3>
					<p class="desc">{{categoryInfo.desc}}</p>
				</div>
			</el-header>
			<el-container>
				<el-aside width="260px">
					<!-- 分类导航 -->
					<div class="sp1">
						<sectionTitle>分类导航</sectionTitle>
						<noContent :condition="categoryNav.categoryNavs.length>0">
							<categoryNav ref="child" :categoryNavs="categoryNav.categoryNavs" :activeFun="activeFun">
							</categoryNav>
						</noContent>
						<div style="text-align: center;margin-top: 20px;">
							<el-pagination @current-change="handleSizeChange2" background layout="prev, pager, next"
								:total="categoryNav.total" :page-size="categoryNav.pageSize" :hide-on-single-page="true"
								:current-page.sync="categoryNav.currPage">
							</el-pagination>
						</div>
					</div>
					<div class="toppingArticles">
						<sectionTitle>置顶推荐</sectionTitle>
						<noContent :condition="toppingArticles.length>0">
							<template v-if="toppingArticles.length>0">
								<a target="_blank" :href="`/article/${toppingArticles[0].id}`" class="ee">
									<wImage :image="toppingArticles[0].image"></wImage>
									<span>{{toppingArticles[0].title}}</span>
								</a>
								<ul>
									<li v-for="(article,index) in toppingArticles">
										<a target="_blank" :href="`/article/${article.id}`">
											<span :class="'bg'+index">
												{{index+1}}
											</span>
											{{article.title}}
										</a>
									</li>
								</ul>
							</template>
						</noContent>
					</div>
					<advertisement></advertisement>
				</el-aside>
				<el-container>
					<!-- <el-main>
						<sectionTitle>热门博文</sectionTitle>
						<el-carousel indicator-position="outside" :interval="5000">
							<el-carousel-item v-for="item in hotArticles">
								<!-- <el-image :src="item.image" fit="cover">
				            <div slot="error" class="image-slot">
				               <i class="el-icon-picture-outline"></i>
				            </div>
				        </el-image> -->
					<!--	<Feature :data="item"></Feature>
							</el-carousel-item>
						</el-carousel>
					</el-main> -->
					<el-footer>
						<sectionTitle>{{articles_title}}<a v-if="categoryId != 0"><i class="el-icon-refresh-left"
									@click="ref"></i></a></sectionTitle>
						<noContent :condition="TJArticles.data.length>0">
							<post v-for="item in TJArticles.data" :post="item"></post>
						</noContent>
						<div style="text-align: center;">
							<el-pagination @current-change="handleSizeChange" background
								layout="prev, pager, next" :total="TJArticles.total"
								:page-size="pageSize" :hide-on-single-page="true" :current-page.sync="currPage"
								:pager-count="5">
							</el-pagination>
						</div>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import articles from '@/assets/js/articles.js'
	export default {
	  name: 'articles',
	  mixins: [
	    articles
	  ],
	  mounted () {
	  },
	  beforeDestroy () {
	  }
	}
</script>
<style lang="less" src="@/assets/css/articles.less">
</style>
<style lang="less" scoped="scoped" src="@/assets/css/articles_sco.less">
</style>
